<template>
 <div id="detail">
    <!-- 导航 -->
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>
    <!-- 添加固定高度 -->
    <Scroll class="content1" ref="scroll" :probe-type="3" @scroll="contentScroll">
        <detail-swiper :imgList="topImages"  @imgHasLoad="imgHasLoad" ></detail-swiper>
        <detail-base-info :goods="goods" v-if="goods"></detail-base-info>
        <detail-shop-info :shop="shop" v-if="shop"></detail-shop-info>
        <detail-goods-info :detail-info="detailInfo"  @imgHasLoad="imgHasLoad" class="abc2"></detail-goods-info>
        <detail-param-info :param="detailParam" ref="params"></detail-param-info>
        <detail-comment-info :comment-info="commentInfo" ref="comment"></detail-comment-info>
        <good-list :goods="recommends" ref="recommend"></good-list>
    </Scroll>
      <Toast />
    <back-top class="back-top" @click.native="backTop" v-show="isShowBackTop"></back-top>
    <detail-bottom-bar @addToCart=addToCart></detail-bottom-bar>
  
 </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo  from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'
import Scroll from 'components/common/scroll/Scroll'
import Toast from 'components/common/toast/Toast'
// import BackTop from 'components/content/backTop/BackTop'
import {getGoodDetailById,getRecommend,GoodsInfo,Shop,GoodsParam} from 'network/detail'

import GoodList from 'components/content/goods/GoodList'

import {backTopMixin} from 'common/mixin'
 export default {
  name:'Detail',
  data () {
   return {
       iid:null,
       topImages:[],
       goods:null,
       shop:null,
       detailInfo:{},
       detailParam:{},
       commentInfo:{},
       recommends:[],
       themeTopYs:[],
       currentIndex:0,
    //    isShowBackTop:false 回到顶部用mixin方式引入
   };
  },
  mixins: [backTopMixin],
  components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      GoodList,
      DetailBottomBar,
      Toast
    //   BackTop
  },

  computed: {},
  created () {
    //   记着这里是route不是路由的router
    //因为有keep-alive，所以这里进来的的时候数据不会刷新，需要在keep-alive除掉这个组件
    this.iid=this.$route.params.id;  
    this.getGoodDetail()
    //2、请求推荐的数据
    getRecommend().then(res=>{
        this.recommends=res.data.list;
    })
  },
  beforeMount() {},


  methods: {
    //   backTop(){
    //         this.$refs.scroll.scrollTo(0,0)
    //     },
      getGoodDetail(){
          getGoodDetailById(this.iid).then(res=>{
              console.log('object :>> ', res);
              const data=res.result;
              this.topImages=data.itemInfo.topImages
            // 2、获取商品属性
            this.goods=new GoodsInfo(data.itemInfo,data.columns,data.shopInfo.services)
              console.log("goods:",this.goods);
            // 3、创建店铺属性
            this.shop=new Shop(data.shopInfo)
            //4、保存商品的详细信息
            this.detailInfo=data.detailInfo;
            // 5、获取参数信息
            this.detailParam=new GoodsParam(data.itemParams.info,data.itemParams.rule)
            //6、取出评论信息
            if(data.rate.cRate!=0){
                this.commentInfo=data.rate.list[0]
            }
            // dom渲染完成,但是图片没有加载完成
            // this.$nextTick(()=>{
            //         this.themeTopYs=[]
            //         this.themeTopYs.push(0);
            //         this.themeTopYs.push(this.$refs.params.$el.offsetTop);
            //         this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
            //         this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
            //         console.log(this.themeTopYs);
            // })
          })
      },
      imgHasLoad(){
          console.log("详情页的图片加载完成");
          this.$refs.scroll.refresh()
                    this.themeTopYs=[]
                    this.themeTopYs.push(0);
                    this.themeTopYs.push(this.$refs.params.$el.offsetTop);
                    this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
                    this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
                    console.log(this.themeTopYs);
      },
      titleClick(index){
          console.log("详情页点击："+index+"  :"+this.themeTopYs[index]);
          this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
      },
      contentScroll(pos){
        //   1、获取y值
          const positionY=-pos.y;
        // 2、和主题的y值进行对比
        //   console.log("position:"+pos);
          let length=this.themeTopYs.length;
          for(let i=0;i< length ; i++){
            //   判断是否在范围内
              if(this.currentIndex!==i && (i<(length-1) && positionY>this.themeTopYs[i] && positionY < this.themeTopYs[i+1] 
              || (i===(length-1) && positionY>this.themeTopYs[i]))){
                 
                  this.currentIndex=i;
                //   console.log( this.$refs.nav);
                  this.$refs.nav.currentIndex=this.currentIndex
                  
              }

          }
        //  3、是否显示回到顶部
        // console.log("position:"+positionY);
        this.isShowBackTop=positionY>450
      },
      addToCart(){
          
          // console.log("已加入购物车");
        //  1、 获取物品信息
        const product={}
       
        product.image=this.topImages[0];
        product.title=this.goods.title;
        product.desc=this.goods.desc;
        product.price=this.goods.realPrice;
        product.iid=this.iid;
        product.count=1;
        //  console.log('product',product);
        // 2、将商品添加到购物车,这是mutations里面的
        // this.$store.commit('addCart',product)
        // actions里面的调用

        // 提示信息显示
        this.$store.dispatch('addCart', product).then(res=>{
          // console.log(this.$toastM);
          this.$toast.showMsg(res,2000)
        })
        // 用封装的方式
        
      }
  },
    //更新后
//   updated () {
//       this.themeTopYs=[]
//       this.themeTopYs.push(0);
//       this.themeTopYs.push(this.$refs.params.$el.offsetTop);
//       this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
//       this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
//         console.log(this.themeTopYs);
//   }

 }

</script>
<style scoped>
    #detail{
        position: relative;
        z-index: 9;
        background: #fff;
        height: 100vh;
    }
    .detail-nav{
        position: relative;
        z-index: 9;
        background: white;
    }
    .content1{
        height: calc(100% - 44px - 49px);
        overflow: hidden;
    }
    .abc2{
        position: inherit;
    }
</style>